import { Select } from 'antd';
import { getChannelList } from 'api/channel';
import React, { useEffect, useState } from 'react';
const { Option } = Select;
/*
  学习目标：封装频道列表组件
*/

// 1. 新建Channel组件，放在components文件夹下
export default function Channel(props) {
  // 2. 业务逻辑：state、生命周期和发请求的代码，JSX、复制到Channel组件

  const [channelList, setChannelList] = useState([]);
  const loadChannels = async () => {
    const res = await getChannelList();
    setChannelList(res.data.channels);
  };

  useEffect(() => {
    loadChannels();
  }, []);
  return (
    <Select style={{ width: 200 }} {...props}>
      {channelList.map((item) => (
        <Option value={item.id} key={item.id}>
          {item.name}
        </Option>
      ))}
    </Select>
  );
}
